<template>
  <button @click="sendCodeBtn">
    {{ number === 0 ? "发送验证码" : `${number}秒后发送` }}
  </button>
</template>

<script>
import { ref } from 'vue'
import { useIntervalFn } from '@vueuse/shared'
export default {
  setup () {
    const number = ref(0)
    const { resume, pause } = useIntervalFn(() => {
      number.value--
      if (number.value <= 0) {
        // 停止
        pause()
      }
    }, 1000, { immediate: false })
    const sendCodeBtn = () => {
      number.value = 60
      // 启动定时器
      resume()
    }

    return { sendCodeBtn, number }
  }
}

</script>

<style>

</style>
